<template>
  <!-- 管理详情主页列表组件 -->
  <div class="farm-card-main">
    <el-card
      v-show="plant_list"
      :body-style="{
        padding: 0,
        margin: 0,
        borderRadius: '10px',
        borderRadius: '14px',
      }"
      shadow="always"
    >
      <div class="farm-item-container" @click="handleClickDetail">
        <img src="../../../../assets/img/home/land.png" />
        <div class="plant_info">
          <div style="font-weight: 700; font-size: 22px">
            {{ formdata.landName }}
          </div>
          <div class="core">
            <span style="padding-top: 9px; font-size: 14px"
              >种植人员：{{ formdata.plantPersonName }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <span style="padding-top: 9px; font-size: 14px"
              >巡田人员：{{ formdata.patrolPersonName }}</span
            >
          </div>
          <div class="core">
            <span>地块面积：{{ formdata.landArea }}亩</span
            >&nbsp;&nbsp;&nbsp;&nbsp;
            <span>种植面积：{{ formdata.plantArea || "未种植" }}</span>
          </div>
          <div class="core">
            <span style="font-weight: 600"
              ><img src="" alt="" />{{ formdata.location }}</span
            >
            <span>EW：{{ formdata.EW }}</span>
            <span>NS：{{ formdata.NS }}</span>
          </div>
        </div>
        <div class="but" @click="deleteClick">
          <el-button type="danger">删除</el-button>
        </div>
        <div class="hide up" @click="todown">
          <img src="../../../../assets/img/farm/up.png" alt="" />
        </div>
        <!-- <div v-if="up" class="hide up" @click="toup">
          <img src="../../../../assets/img/farm/up.png" alt="" />
        </div> -->
      </div>
    </el-card>
    <!-- 压缩展示框 -->
    <el-card
      v-show="plant_minilist"
      :body-style="{
        padding: 0,
        margin: 0,
        borderRadius: '10px',
        borderRadius: '14px',
      }"
      shadow="always"
    >
      <div class="core_">
        <span style="font-weight: 700; font-size: 14px">{{
          formdata.landName
        }}</span>
        <span style="padding-top: 9px; font-size: 14px"
          >种植人员：{{ formdata.plantPersonName }}</span
        >
        <span style="padding-top: 9px; font-size: 14px"
          >巡田人员：{{ formdata.patrolPersonName }}</span
        >
        <!-- <span style="margin: 0 15px; padding-top: 0">
          <el-form :inline="true" :model="formInline">
            <el-form-item label="巡田人员：">
              <el-select
                v-model="formInline.plantName"
                placeholder="请选择巡田人员"
                clearable
              >
                <el-option
                  v-for="item in plantnamelist"
                  :key="item.Code"
                  :label="item.plantname"
                  :value="item.Code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </span> -->
        <span>地块面积：{{ formdata.landArea }}亩</span>
        <span>种植面积：{{ formdata.plantArea || "未种植" }}</span>
        <span style="font-weight: 600"
          ><img src="" alt="" />{{ formdata.location }}</span
        >
        <span>EW：{{ formdata.EW }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <span>NS：{{ formdata.NS }}</span>
        <div class="hide_ down" @click="toup">
          <img src="../../../../assets/img/farm/down.png" alt="" />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import farmRecordDialog from "./farmRecordDialog";
// 详情接口  巡田人员接口 删除接口
import {
  queryDetailData,
  querySelectInspectionList,
  deleteLands
} from "@/api/farmEvent"
export default {
  props: {
    listParames: {
      type: Object
    }
  },
  components: {
    "farm-record-dialog": farmRecordDialog
  },
  data() {
    return {
      // up: false,
      plant_list: true,
      plant_minilist: false,
      formdata: {
        // name: "一号水稻田",
        // plantPersonName: "张晨光", //种植人员
        // inspectionName: "李朝阳", //巡田人员
        // landArea: "225", //地块面积
        // plantArea: "", //种植面积
        // location: "哈尔滨市阿城区红星村", //定位
        // EW: "234.5", //经度
        // NS: "123.4" //维度
      },
      formInline: {
        patrolPersonName: "", //巡田人员
        plantType: "" //作物类型
      },
      cropTypeOptions: [], // 作物类型
      plantnamelist: [] //巡田人员
    };
  },
  mounted() {
    // this.getPlantList();
    this.getAllTypeList();
    this.getDetailData();
    this.getSelectInspectionList();
  },
  methods: {
    // 获取详情数据
    async getDetailData() {
      // console.log(this.listParames, '接收列表的id对象');
      const response = await queryDetailData(this.listParames.id);
      // console.log(response, '----');
      if (response.data.code == 200) {
        // 获取详情数据赋值
        this.formdata = response.data.data;
      }
    },

    // 获取巡田人员数据
    async getSelectInspectionList() {
      const response = await querySelectInspectionList();
      // console.log(response, '----');
      // console.log(response.data.data);
      if (response.data.code == 200) {
        // 获取巡田人员数据赋值
        this.formdata.inspectionName = response.data.data;
      }
    },

    // 删除地块
    async deleteClick() {
      const landIds = [];
      landIds.push(this.listParames.id);
      const response = await deleteLands({ ids: landIds });
      if (response.data.code == 200) {
        // 再次调用一下列表数据接口 改一下方法名即可
        // this.getList()
        // 删除弹框
        this.$message({ type: "success", message: response.data.msg })//弹出操作
      }
    },
    handleClickDetail() { },
    getAllTypeList() {
      this.cropTypeOptions = [
        {
          plantName: "棉花",
          plantCode: "0"
        },
        {
          plantName: "玉米",
          plantCode: "1"
        },
        {
          plantName: "大豆",
          plantCode: "2"
        }
      ]; // 作物类型

      // this.plantnamelist = [
      //   {
      //     plantname: "孙坚",
      //     Code: "0"
      //   },
      //   {
      //     plantname: "李玉",
      //     Code: "1"
      //   },
      //   {
      //     plantname: "孙闻",
      //     Code: "2"
      //   }
      // ]; // 作物类型
    },
    todown() {
      this.plant_list = false;
      this.plant_minilist = true;
    },
    toup() {
      this.plant_minilist = false;
      this.plant_list = true;
    }
  }
};
</script>
<style scoped>
.farm-item-container {
  padding: 16px;
  display: flex;
  /* cursor: pointer;
  user-select: none; */
  position: relative;
}
.plant_info {
  margin-left: 20px;
}
.core {
  padding: 10px 0;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.core_ {
  display: flex;
  padding: 0 15px;
  margin-top: 15px;
}
.core_ span {
  /* padding: 0 5px; */
  margin: 0 5px;
  padding-top: 10px;
}
.but {
  position: absolute;
  right: 30px;
  bottom: 20px;
}
.hide {
  position: absolute;
  right: 50px;
  top: 20px;
}
.hide_ {
  margin-left: 50px;
}
</style>
